<template>
  <div>
    <el-form ref="YezhuForm" :model="zuhuForm" label-width="80px" :inline="true">
      <el-form-item label="姓名">
        <el-input v-model="zuhuForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="zuhuForm.age"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="zuhuForm.address"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="sel(zuhuForm)">搜索</el-button>
    </el-form>
    <div>
      <el-header>
        <el-link>
          <el-button type="primary" @click="dialogVisible = true" icon="el-icon-circle-plus-outline">添加</el-button>
        </el-link>
      </el-header>
      <div style="height: 900px">
        <el-dialog
          title="添加"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form style="width: 40% " :model="zuhuForm" ref="zuhuForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="名字" prop="name">
              <el-input v-model="zuhuForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-input v-model="zuhuForm.sex"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="zuhuForm.age"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="zuhuForm.address"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="idcard">
              <el-input v-model="zuhuForm.idcard"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('zuhuForm')">确 定</el-button>
  </span>
        </el-dialog>
        <el-table
          :data="users"
          style="width: 100% "
        >
          <el-table-column
            prop="id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="业主姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="180">
          </el-table-column>
          <el-table-column
            prop="idcard"
            label="身份证"
            width="180">
          </el-table-column>

          <el-table-column
            label="操作" height="100px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="del(scope.row.id)"
              >删除
              </el-button>
              <el-button type="primary" icon="el-icon-edit-outline"  @click="edit(scope.row)" plain>编辑</el-button>
              <el-dialog
                title="编辑"
                :visible.sync="updateDialogVisible"
                width="30%"
              >
                <el-form style="width: 40%" :model="zuhuForm"  ref="zuhuForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item  label="编号" prop="id">
                    <el-input v-model="zuhuForm.id" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="zuhuForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                    <el-input v-model="zuhuForm.sex"></el-input>
                  </el-form-item>
                  <el-form-item label="年龄" prop="age">
                    <el-input v-model="zuhuForm.age"></el-input>
                  </el-form-item>
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="zuhuForm.address"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证" prop="idcard">
                    <el-input v-model="zuhuForm.idcard"></el-input>
                  </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update(zuhuForm)">确 定</el-button>
            </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zuhu',
  inject: ['reload'],
  data () {
    return {
      msg: 'hello world',
      users: [],
      input: '',
      dialogVisible: false,
      updateDialogVisible: false,
      zuhuForm: {
        name: '',
        sex: '',
        age: '',
        address: '',
        idcard: ''
      }
    }
  },
  created () {
    const that = this
    this.$axios.get('http://localhost:8001/Zuhu/list/')
      .then(function (response) {
        console.log(response)
        that.users = response.data
      })
  },
  methods: {
    async del (oid) {
      const confirmResult = await this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      this.$axios.post('http://localhost:8001/Zuhu/delete?id=' + oid)
      this.reload()
    },
    submitForm (querystring) {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Zuhu/add', qs.stringify(this.zuhuForm))
      this.reload()
    },
    edit (zuhuForm) {
      this.zuhuForm = zuhuForm
      this.updateDialogVisible = true
    },
    update () {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Zuhu/update', qs.stringify(this.zuhuForm))
      this.reload()
    },
    sel (zuhuForm) {
      var qs = require('querystring')
      const that = this
      this.$axios.post('http://localhost:8001/Zuhu/selectlike', qs.stringify(this.zuhuForm))
        .then(function (response) {
          console.log(response)
          that.users = response.data
        })
    }
  }
}
</script>

<style scoped>

</style>
